<template>
  <div>
    <div class="login_box cl" :style="bg">
      <div class="mid--1150 pos_rel">
        <div class="login_body rf pos_abs">
          <!-- 登录账号 -->
          <div class="title flex">
            <div class="logo">
              <img />
            </div>
            <span class="name">完善信息</span>
          </div>
          <hr />
          <br />
          <div class="main">
            <div class="text">
              <label class="title">设置昵称 :</label>
              <input
                type="text"
                class="innerBox"
                v-model="uname"
                placeholder="输入昵称（以后可更改）"
                required
                autofocus
              />
            </div>

            <div class="text">
              <label class="title">设置邮箱 :</label>
              <input
                type="text"
                class="innerBox"
                v-model="email"
                placeholder="输入你的邮箱"
                required
                autofocus
              />
            </div>

            <div class="text">
              <label class="title">设置登陆密码 :</label>
              <input
                type="password"
                class="innerBox"
                v-model="upwd"
                placeholder="输入密码"
                required
                autofocus
              />
            </div>

            <div class="text">
              <label class="title">重复输入密码 :</label>
              <input
                type="password"
                class="innerBox"
                v-model="check_upwd"
                placeholder="重新输入密码"
                required
                autofocus
              />
            </div>
            <input class="button_login" type="button" value="完成注册" @click="bt_register" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var _self;
import "@/assets/css/frx/common.css";
import "@/assets/css/frx/font-awesome-4.7.0/css/font-awesome.min.css";
import "@/assets/css/frx/login.css";
import pub from "../../api/frx/js/public";
export default {
  data() {
    return {
      uname: "",
      email: "",
      upwd: "",
      check_upwd: "",
      phone: "",
      photo: 0,
      bg: {
        backgroundImage: "url(" + require("@/assets/imgs/cl/img1.jpg"),
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center ",
        backgroundSize: "100%"
      }
    };
  },

  methods: {
    // 完成注册
    async bt_register() {
      try {
        pub.ch_uname(_self.uname);
        pub.ch_email(_self.email);
        pub.ch_upwd(_self.upwd);
        pub.ch_check_upwd(_self.check_upwd);

        var gg = await pub.http_get("user", "check/username", {
          username: _self.uname
        });

        if (!_self.phone) {
          alert("电话丢失！");
          (_self.uname = ""),
            (_self.email = ""),
            (_self.upwd = ""),
            (_self.check_upwd = ""),
            _self.$route.push({ name: "register" });
          return;
        }

        if (gg.data == "yes") {
          alert("用户名已存在！");
          return;
        }

        var yy = await pub.http_post("user", "doregister", {
          username: _self.uname,
          password: _self.check_upwd,
          phone: _self.phone,
          photo: _self.photo,
          email: _self.email
        });

        if (!yy || yy.result != "success") {
          alert("注册失败!");
          this.$router.go(-1);
          return;
        } else {
          alert("注册成功!");
          sessionStorage.setItem("userInfo", JSON.stringify(yy));
          window.open("/pc", "_self");
        }
      } catch (e) {
        switch (e.message) {
          case "uname":
            alert("请输入正确的昵称");

            break;
          case "upwd":
            alert("请输入正确的密码");

            break;
          case "email":
            alert("请输入正确邮箱");

            break;
          case "check_upwd":
            alert("请输入正确的密码");

            break;
        }
      }
    }
  },
  created() {
    // 路由传参(可见)
    _self = this;
    _self.phone = _self.$route.params.phone;
  }
};
</script>

<style scoped>
.login_box .login_body {
  right: 33%;
  top: 70px;
}
.login_box .main .text {
  display: flex;
}

.login_box .main .text .title {
  flex: 3;
  text-align: center;
  vertical-align: middle;
  /* float: left; */
  font-size: 16px;
  color: #dfcca1;
  line-height: 40px;
  /* padding: 0 12px 0 0; */
  box-sizing: border-box;
}
.login_box .main .text .innerBox {
  flex: 5;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0);
  border: rgba(0, 0, 0, 0);
  border-bottom: 1px solid #dfcca1;
  border-radius: 0px;
  color: #dfcca1;
  margin-right: 15px;
}
/* ---------------------- */
.el-radio {
  color: #606266;
  font-weight: 500;
  line-height: 1;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  outline: none;
  font-size: 14px;
  margin-right: 30px;
}

.el-radio__input {
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  display: inline-block;
  line-height: 1;
  position: relative;
  vertical-align: middle;
}

.el-radio__original {
  opacity: 1;
  width: 16px;
  height: 16px;
  outline: none;
}
.el-radio__label {
  font-size: 16px;
  padding-left: 30px;
}
</style>